<template>
    <!-- 表情组件 -->
    <div class="emoji-panel-wrap" :class="{ active: active ? 'active' : '' }">
        <emoji
            v-for="(item, index) in emojis"
            :text="item"
            v-bind:key="index"
            @onClick="handleEmojiClick"
        />
    </div>
</template>
<script>
export default {
    name: "emoji-panel",
    props: {
        active: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            emojis: [
                "angry",
                "anguished",
                "astonished",
                "blush",
                "cold_sweat",
                "confounded",
                "confused",
                "cry",
                "disappointed",
                "disappointed_relieved",
                "dizzy_face",
                "expressionless",
                "fearful",
                "flushed",
                "frowning",
                "grimacing",
                "grin",
                "grinning",
                "heart_eyes",
                "hushed",
                "innocent",
                "joy",
                "kissing_closed_eyes",
                "kissing_heart",
                "laughing",
                "neutral_face",
                "no_mouth",
                "open_mouth",
                "pensive",
                "persevere",
                "relaxed",
                "relieved",
                "sleepy",
                "smile",
                "smiley",
                "smirk",
                "sob",
                "stuck_out_tongue",
                "sunglasses",
                "sweat",
                "sweat_smile",
                "scream",
                "wink",
                "unamused",
                "satisfied",
                "worried",
                "stuck_out_tongue_closed_eyes",
                "weary",
                "yum",
                "tired_face",
                "triumph",
                "stuck_out_tongue_winking_eye",
            ],
        };
    },
    methods: {
        handleEmojiClick(a) {
            this.$emit("emojiClick", a);
        },
    },
};
</script>
<style scoped>
.emoji-panel-wrap {
    box-sizing: border-box;
    /* border: 1px solid #cccccc; */
    border-radius: 5px;
    background-color: #ffffff;
    height: 0;
    width: 100%;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}
.emoji-panel-wrap.active {
    height: 169px;
    overflow: auto;
}
</style>